<template>
  <div class="box">
    <div class="box_left">
      <Common-Slider-Bar
        ref="silderBar"
        :item-view-option="itemViewOption"
        :search-key="'PROGRAMNAME'"
        :request="{
          url: url + '/dynamicReportForm/queryBodyByProduce',
          method: 'post',
          data: searchData
        }"
        :open-mune-children="openMuneChildren"
        @select="menuChange"
        @fatherSelct="menuChangeFather"
        @requestSuccess="requestSuccess"
      >
        <template
          v-if="urlTitle.includes('项目分析')&& !urlPROGRAMNAME"
          slot="top"
        >
          <el-select
            v-model="projectAnalysisType"
            class="projectAnalysisType"
            @change="projectAnalysisTypeChange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </Common-Slider-Bar>
    </div>
    <div class="box_digital1">
      <breadcrumb class="breadcrumb-container" />
      <div class="box_digital">
        <base-info
          :base-info="baseInfo"
          :title="title"
          :note-list="noteList"
          :rate="rate"
          :enterprise-name="enterpriseName"
        />
      </div>
      <div class="box_table">
        <table-common :menu-id="menuId" :filter-list="filterList" />
      </div>
    </div>
  </div>
</template>

<script>
import CommonSliderBar from '@/components/CommonSliderBar';
import tableCommon from '@/components/tableCommon/index.vue';
import BaseInfo from './components/BaseInfo.vue';
import baseUrl from '@/utils/processRequest1';
import Breadcrumb from '@/components/Breadcrumb';
export default {
  components: {
    BaseInfo,
    tableCommon,
    CommonSliderBar,
    Breadcrumb
  },
  data() {
    return {
      menuId: undefined,
      url: '',
      baseInfo: {},
      filterList: [],
      searchData: {},
      ENTERPRISECODEList: [],
      rate: '',
      noteList: [],
      enterpriseName: '',
      itemViewOption: {},
      openMuneChildren: true,
      xcRoleId: '',
      urlTitle: '',
      urlXMLX: '',
      urlPROGRAMNAME: '',
      ENTERPRISECODE: '',
      title: '',
      options: [{ value: 1, label: '项目类型' }, { value: 2, label: '条线' }],
      projectAnalysisType: 1,
      isYCrole: false
    };
  },
  created() {
    const {
      title,
      ENTERPRISECODE,
      XMLX,
      routeTitle,
      DIVISION,
      isUnfold,
      PROGRAMNAME,
      ORDERBY,
      MAIN
    } = this.$route.query;
    this.xcRoleId = localStorage.getItem('xcRoleId');
    if (['458'].includes(this.xcRoleId)) {
      this.isYCrole = true;
    }
    this.urlTitle = title;
    this.urlXMLX = XMLX;
    this.urlPROGRAMNAME = PROGRAMNAME;
    this.ENTERPRISECODE = ENTERPRISECODE;
    if (title.includes('项目分析')) {
      this.searchData = {
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 590,
        resultAsTree: true,
        orderBy: 1,
        filterList: []
      };
      // 全区进来
      if (routeTitle && routeTitle.includes('全区总览')) {
        this.searchData = {
          pageIndex: 0,
          pageSize: 100,
          pageType: 1,
          tableId: 475,
          resultAsTree: true,
          filterList: [],
          outFilterList: [],
          orderBy: 1
        };
        if (XMLX) {
          this.searchData.tableId = 590;
          const valueXmlx =
            XMLX === '专项项目'
              ? '3'
              : XMLX === '基本支出'
                ? '1'
                : XMLX === '公用经费'
                  ? '2'
                  : '';
          this.searchData.outFilterList = this.searchData.outFilterList.concat([
            {
              col: 'XMLX',
              value: valueXmlx
            }
          ]);
        }
        if (PROGRAMNAME) {
          this.searchData.tableId = 515;
          this.searchData.resultAsTree = '';
        }
        if (ORDERBY) {
          this.searchData.orderBy = ORDERBY;
          this.searchData.tableId = 590;
        }
      } else if (routeTitle && routeTitle.includes('镇街总览')) {
        this.openMuneChildren = true;
        this.searchData = {
          pageIndex: 0,
          pageSize: 100,
          pageType: 1,
          tableId: 570,
          resultAsTree: true,
          filterList: [],
          outFilterList: [],
          orderBy: 1
        };
        // if(PROGRAMNAME){
        //   this.searchData.tableId = 475;
        // }
        if (XMLX) {
          this.searchData.tableId = 590;
          const valueXmlx =
            XMLX === '专项项目'
              ? '3'
              : XMLX === '基本支出'
                ? '1'
                : XMLX === '公用经费'
                  ? '2'
                  : '';
          this.searchData.outFilterList = this.searchData.outFilterList.concat([
            {
              col: 'XMLX',
              value: valueXmlx
            }
          ]);
          this.openMuneChildren = false;
        }
        if (DIVISION) {
          this.projectAnalysisType = 2;
          this.searchData.orderBy = 1;
          this.searchData.filterList = this.searchData.filterList.concat([
            {
              col: 'DIVISION',
              value: DIVISION
            }
          ]);
          // this.searchData.outFilterList = [
          //   { col: "ENTERPRISECODE", value: ENTERPRISECODE }
          // ];
          this.searchData.tableId = 591;
          this.openMuneChildren = false;
        }
        if (isUnfold) {
          this.openMuneChildren = false;
        }
        if (ORDERBY) {
          this.searchData.orderBy = ORDERBY;
          this.searchData.tableId = 590;
        }
      }
      if (ENTERPRISECODE) {
        // 财政角色显示全部(除了镇街总览进来)
        if (this.isYCrole) {
          // 财政
          if (routeTitle && routeTitle.includes('镇街总览')) {
            this.searchData.filterList = this.searchData.filterList.concat([
              {
                col: 'ENTERPRISECODE',
                value: ENTERPRISECODE
              }
            ]);
          }
        } else {
          this.searchData.filterList = this.searchData.filterList.concat([
            {
              col: 'ENTERPRISECODE',
              value: ENTERPRISECODE
            }
          ]);
        }
      }
      this.$route.query.PROGRAMNAME &&
        this.searchData.filterList.push({
          col: 'PROGRAMNAME',
          value: this.$route.query.PROGRAMNAME,
          symbol: 'eq'
        });
      this.openMuneChildren = false;
      if (PROGRAMNAME) {
        this.openMuneChildren = true;
      }
      if (MAIN) {
        this.searchData.tableId = 590;
      }
      this.title = 'PROGRAMNAME';
      this.noteList = [
        { key: '预算数', value: 'MONEY1' },
        { key: '执行数', value: 'MONEY2' },
        { key: '未执行数', value: 'MONEY3' }
      ];
      this.rate = 'RATE';
      this.itemViewOption = {
        itemTitle: 'PROGRAMNAME',
        key: 'ID',
        menuTitle: 'PROGRAMNAME'
      };
      // this.openMuneChildren = false;
    } else if (title.includes('两直分析')) {
      this.searchData = {
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 492,
        resultAsTree: true
        // filterList: [{ col: 'ENTERPRISECODE', value: this.$route.query.ENTERPRISECODE }]
      };
      this.title = 'PROGRAMNAME';
      this.rate = 'RATE';
      this.noteList = [
        { key: '发放总金额', value: 'MONEY' },
        { key: '执行数', value: 'MONEY2' },
        { key: '资金使用率', value: 'RATE' }
      ];
      this.itemViewOption = {
        itemTitle: 'PROGRAMNAME',
        key: 'PROGRAMNAME',
        menuTitle: 'PROGRAMNAME'
      };
      this.openMuneChildren = false;
    } else if (title.includes('一卡通')) {
      this.openMuneChildren = false;
      this.searchData = {
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 406,
        resultAsTree: true,
        orderBy: 1
      };
      if (isUnfold) {
        this.openMuneChildren = false;
      }
      ENTERPRISECODE && !this.isYCrole
        ? (this.searchData.filterList = [
          { col: 'ENTERPRISECODE', value: this.$route.query.ENTERPRISECODE }
        ])
        : (this.openMuneChildren = false);
      if (routeTitle) {
        ENTERPRISECODE && routeTitle.includes('镇街总览')
          ? (this.searchData.filterList = [
            { col: 'ENTERPRISECODE', value: this.$route.query.ENTERPRISECODE }
          ])
          : (this.openMuneChildren = false);
      }
      this.title = 'PROGRAMNAME';
      this.rate = 'RATE';
      this.noteList = [
        { key: '发放总金额', value: 'YFJE' },
        { key: '发放总人数', value: 'XZXM_FFZRS' },
        { key: '成功人数', value: 'XZXM_CGRS' },
        { key: '失败人数', value: 'XZXM_SBRS' }
      ];
      this.itemViewOption = {
        itemTitle: 'PROGRAMNAME',
        key: 'ID',
        menuTitle: 'PROGRAMNAME'
      };
    }
    this.ENTERPRISECODEList = [
      {
        col: 'ENTERPRISECODE',
        value: ENTERPRISECODE
      }
    ];
    // this.openMuneChildren = false;
    this.init();
  },
  methods: {
    requestSuccess(obj) {
      const { title, routeTitle, DIVISION } = this.$route.query;
      if (routeTitle) {
        if (routeTitle.includes('全区总览')) {
          return;
        }
      }
      if (title.includes('两直分析')) {
        const { data } = obj;
        data.length && this.$refs.silderBar.openKeys([data[0].PROGRAMNAME]);
      } else if (title.includes('一卡通')) {
        if (this.isYCrole) {
          if (routeTitle && routeTitle.includes('镇街总览')) {
            const { data } = obj;
            data.length && this.$refs.silderBar.openKeys([data[0].ID]);
          }
        } else {
          const { data } = obj;
          data.length && this.$refs.silderBar.openKeys([data[0].ID]);
        }
      } else if (
        title.includes('项目分析') &&
        (!this.isYCrole || (routeTitle && routeTitle.includes('镇街总览')))
      ) {
        if (!DIVISION) {
          const { data } = obj;
          data.length && this.$refs.silderBar.openKeys([data[0].ID]);
        } else {
          const { data } = obj;
          data.length &&
            this.$refs.silderBar.openKeys([data[0].ID, data[0].children[0].ID]);
        }
      }
    },
    init() {
      baseUrl().then(res => {
        this.url = res.url;
        this.$nextTick(() => {
          this.$refs.silderBar.send();
          // this.$refs.silderBar.selectMenu();
        });
      });
    },
    menuChange(obj) {
      const { title, XMLX } = this.$route.query;
      this.baseInfo = obj.value;
      const { ENTERPRISECODE, PROGRAMNAME } = obj.value;
      if (title.includes('项目分析')) {
        this.enterpriseName = obj.value.DIVISION;
        !this.menuId && (this.menuId = 1623565437264);
        const valueXmlx =
          XMLX === '专项项目'
            ? '3'
            : XMLX === '基本支出'
              ? '1'
              : XMLX === '公用经费'
                ? '2'
                : '';
        if (XMLX) {
          this.filterList = [{ col: 'XMLX', value: valueXmlx }];
        }
      } else if (title.includes('两直分析')) {
        !this.menuId && (this.menuId = 1623734766269);
      } else if (title.includes('一卡通')) {
        !this.menuId && (this.menuId = 1623138732610);
      }
      this.filterList = [
        { col: 'ENTERPRISECODE', value: ENTERPRISECODE, symbol: 'eq' },
        { col: 'PROGRAMNAME', value: PROGRAMNAME, symbol: 'eq' }
      ];
    },
    menuChangeFather(obj) {
      const { title, XMLX } = this.$route.query;
      const ENTERPRISECODE = obj.value.ENTERPRISECODE;
      this.baseInfo = obj.value;
      this.filterList = [
        { col: 'ENTERPRISECODE', value: ENTERPRISECODE, symbol: 'eq' }
      ];
      if (title.includes('项目分析')) {
        this.enterpriseName = obj.value.ENTERPRISENAME;
        !this.menuId && (this.menuId = 1623565437264);
        if (XMLX) {
          const valueXmlx =
            XMLX === '专项项目'
              ? '3'
              : XMLX === '基本支出'
                ? '1'
                : XMLX === '公用经费'
                  ? '2'
                  : '';
          this.filterList = [{ col: 'XMLX', value: valueXmlx }];
        }
      } else if (title.includes('一卡通')) {
        !this.menuId && (this.menuId = 1623138732610);
      } else if (title.includes('两直分析')) {
        !this.menuId && (this.menuId = 1623734766269);
        ENTERPRISECODE.length === 3 &&
          (this.filterList = [
            { col: 'ENTERPRISECODE', value: ENTERPRISECODE, symbol: 'lct' }
          ]);
      }
    },
    projectAnalysisTypeChange(value) {
      const {
        ENTERPRISECODE,
        DIVISION,
        ORDERBY,
        routeTitle,
        XMLX
      } = this.$route.query;
      if (value === 1) {
        this.searchData = {
          pageIndex: 0,
          pageSize: 100,
          pageType: 1,
          tableId: 590,
          resultAsTree: true,
          filterList: [],
          outFilterList: [],
          orderBy: 1
        };
        if (ENTERPRISECODE && !this.isYCrole) {
          this.searchData.filterList = this.searchData.filterList.concat([
            {
              col: 'ENTERPRISECODE',
              value: ENTERPRISECODE
            }
          ]);
        }
        if (routeTitle) {
          if (ENTERPRISECODE && routeTitle.includes('镇街总览')) {
            this.searchData.filterList = this.searchData.filterList.concat([
              {
                col: 'ENTERPRISECODE',
                value: ENTERPRISECODE
              }
            ]);
          }
        }

        if (DIVISION) {
          this.searchData.filterList = this.searchData.filterList.concat([
            {
              col: 'DIVISION',
              value: DIVISION
            }
          ]);
        }
        if (ORDERBY) {
          this.searchData.orderBy = ORDERBY;
        }
        if (XMLX) {
          const valueXmlx =
            XMLX === '专项项目'
              ? '3'
              : XMLX === '基本支出'
                ? '1'
                : XMLX === '公用经费'
                  ? '2'
                  : '';
          this.searchData.outFilterList = this.searchData.outFilterList.concat([
            {
              col: 'XMLX',
              value: valueXmlx
            }
          ]);
        }
        setTimeout(() => {
          this.$refs.silderBar.send();
        }, 0);
      } else if (value === 2) {
        this.searchData = {
          pageIndex: 0,
          pageSize: 100,
          pageType: 1,
          tableId: 591,
          resultAsTree: true,
          filterList: [],
          outFilterList: [],
          orderBy: 1
        };
        if (ENTERPRISECODE && !this.isYCrole) {
          this.searchData.filterList = this.searchData.filterList.concat([
            {
              col: 'ENTERPRISECODE',
              value: ENTERPRISECODE
            }
          ]);
          // this.searchData.outFilterList = this.searchData.outFilterList.concat([
          //   {
          //     col: "ENTERPRISECODE",
          //     value: ENTERPRISECODE
          //   }
          // ]);
        }
        if (routeTitle) {
          if (ENTERPRISECODE && routeTitle.includes('镇街总览') && this.isYCrole) {
            this.searchData.filterList = this.searchData.filterList.concat([
              {
                col: 'ENTERPRISECODE',
                value: ENTERPRISECODE
              }
            ]);
            // this.searchData.outFilterList = this.searchData.outFilterList.concat(
            //   [
            //     {
            //       col: "ENTERPRISECODE",
            //       value: ENTERPRISECODE
            //     }
            //   ]
            // );
          }
        }

        if (DIVISION) {
          this.searchData.filterList = this.searchData.filterList.concat([
            {
              col: 'DIVISION',
              value: DIVISION
            }
          ]);
        }
        if (XMLX) {
          const valueXmlx =
            XMLX === '专项项目'
              ? '3'
              : XMLX === '基本支出'
                ? '1'
                : XMLX === '公用经费'
                  ? '2'
                  : '';
          this.searchData.outFilterList = this.searchData.outFilterList.concat([
            {
              col: 'XMLX',
              value: valueXmlx
            }
          ]);
        }
        setTimeout(() => {
          this.$refs.silderBar.send();
        }, 0);
      }
    }
    // getBaseInfoValue(obj) {
    //   let MONEY1 = 0; let MONEY2 = 0; let MONEY3 = 0; let RATE = 0;
    //   const length = obj.children.length;
    //   length && obj.children.forEach(item => {
    //     item.MONEY1 && (MONEY1 += Number(item.MONEY1));
    //     item.MONEY2 && (MONEY2 += Number(item.MONEY2));
    //     item.MONEY3 && (MONEY3 += Number(item.MONEY3));
    //     item.RATE && (RATE += Number(item.MONEY3.split('%')[0]));
    //   });
    //   const objDeal = {
    //     ...obj,
    //     MONEY1: MONEY1.toFixed(2),
    //     MONEY2: MONEY1.toFixed(2),
    //     MONEY3: MONEY1.toFixed(2),
    //     RATE: (RATE / length).toFixed(2) + '%'
    //   };
    //   return objDeal;
    // }
  }
};
</script>

<style lang="scss" scoped>
$vw: 1920px;
/*像素转换相对单位vw*/
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.box {
  height: 100%;
  display: flex;
  width: 100%;
  .box_left {
    width: 200px;
    // height: calc(100% - 75px);
    background: #ffffff;
    .projectAnalysisType {
      width: 90%;
      padding-left: 10%;
    }
  }
  .box_digital1 {
    padding: px2vw(24px);
    width: calc(100% - 200px);
    // flex: 1;
  }
  .box_digital {
    width: 100%;
    // overflow-y: auto;
    .base_info {
      border-radius: 4px;
      background-color: #fff;
      width: 100%;
      // width: calc(100% - px2vw(24px)*2);
    }
    height: 35%;
    margin-bottom: 24px;
  }
  .box_table {
    background-color: #fff;
    height: calc(65% - 60px);
    width: 100%;
  }
}
</style>
